import type { WatermarkProps } from '@/types/watermark'
import React, { useRef } from 'react'
import { useResponsiveFontSize } from './useResponsiveFontSize'
import styles from './watermark.less'

const FONT_SIZE_RATIO = 0.02

/**
 * 方形居中水印组件
 * @description 居中显示品牌logo、型号和参数，支持自适应
 */
const CenteredSquareWatermark: React.FC<
  WatermarkProps & { paddingEm: number; fontSizeRatio?: number; logoSizeRatio?: number }
> = ({
  image,
  watermarkConfig,
  brandLogo,
  deviceModel,
  containerRef,
  paddingEm = 1,
  fontSizeRatio = 1,
  logoSizeRatio = 1,
  textColor
}) => {
  const imgRef = useRef<HTMLImageElement>(null)
  const watermarkRef = useRef<HTMLDivElement>(null)
  useResponsiveFontSize(imgRef, watermarkRef, FONT_SIZE_RATIO * fontSizeRatio)

  return (
    <div
      ref={containerRef}
      className={styles.imageContainer}
      style={{
        position: 'relative',
        width: '100%',
        margin: '0 auto',
        padding: `${paddingEm}em`,
        backgroundColor: watermarkConfig.backgroundColor,
        boxShadow: '0 0.33em 1em rgba(0, 0, 0, 0.15)'
      }}
    >
      {/* 原始图片 */}
      <img
        ref={imgRef}
        src={image || ''}
        alt="Preview"
        style={{
          display: 'block',
          width: '100%',
          height: 'auto',
          maxHeight: '70vh',
          objectFit: 'contain'
        }}
      />
      {/* 居中方形水印 */}
      <div
        ref={watermarkRef}
        style={{ backgroundColor: watermarkConfig.backgroundColor }}
        className={styles.centeredSquareWatermark}
      >
        {/* 品牌Logo */}
        {brandLogo ? (
          <img
            src={brandLogo}
            alt="Brand"
            className={styles.squareLogo}
            style={{
              height: `${3 * (logoSizeRatio || 1)}em`,
              maxWidth: `${10 * (logoSizeRatio || 1)}em`
            }}
          />
        ) : null}
        {/* 型号名称 */}
        <div className={styles.modelName} style={{ color: textColor }}>
          {deviceModel}
        </div>
        {/* 相机参数 */}
        <div className={styles.specsInfo} style={{ color: textColor }}>
          {watermarkConfig.showFocalLength && watermarkConfig.exifData.focalLength}{' '}
          {watermarkConfig.showAperture && watermarkConfig.exifData.aperture}{' '}
          {watermarkConfig.showShutter && watermarkConfig.exifData.shutterSpeed}{' '}
          {watermarkConfig.showISO && watermarkConfig.exifData.iso}
        </div>
      </div>
    </div>
  )
}

export default CenteredSquareWatermark
